<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Button 按钮 | 🔨  Better-Ui</title>
    <meta name="description" content="better-ui是一个基于Vite的UI组件库">
    <link rel="stylesheet" href="/assets/style.0db8489b.css">
    <link rel="modulepreload" href="/assets/app.9ae676fd.js">
    <link rel="modulepreload" href="/assets/components_button_index.md.6e839d9a.lean.js">
    
    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-ba23db2c><!--[--><!--]--><!--[--><span tabindex="-1" data-v-1a0289de></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-1a0289de> Skip to content </a><!--]--><!----><header class="VPNav" data-v-ba23db2c data-v-44ef280d><div class="VPNavBar has-sidebar" data-v-44ef280d data-v-951e4890><div class="container" data-v-951e4890><div class="VPNavBarTitle has-sidebar" data-v-951e4890 data-v-3a5acae4><a class="title" href="/" data-v-3a5acae4><!--[--><img class="VPImage logo" src="/logo.svg" data-v-21f7f827><!--]--><!--[-->🔨  better-ui是一个基于Vite的UI组件库<!--]--></a></div><div class="content" data-v-951e4890><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-951e4890 data-v-8a13ad30><span id="main-nav-aria-label" class="visually-hidden" data-v-8a13ad30>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide/" data-v-8a13ad30 data-v-238b92a6 data-v-fe9a2d10><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/components/" data-v-8a13ad30 data-v-238b92a6 data-v-fe9a2d10><!--[-->组件<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/theme/" data-v-8a13ad30 data-v-238b92a6 data-v-fe9a2d10><!--[-->主题<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/resource/" data-v-8a13ad30 data-v-238b92a6 data-v-fe9a2d10><!--[-->资源<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-951e4890 data-v-48aad6b4><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-48aad6b4 data-v-d3936e48 data-v-73ab608a><span class="check" data-v-73ab608a><span class="icon" data-v-73ab608a><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d3936e48><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d3936e48><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-951e4890 data-v-43280e56 data-v-5bfb9d64><!--[--><a class="VPSocialLink" href="https://github.com/better-ui/better-ui" title="github" target="_blank" rel="noopener noreferrer" data-v-5bfb9d64 data-v-5277b777><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-5277b777><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-5277b777>github</span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-951e4890 data-v-19481d41 data-v-89dc02ca><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-89dc02ca><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-89dc02ca><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-89dc02ca><div class="VPMenu" data-v-89dc02ca data-v-7e15a8b0><!----><!--[--><!--[--><!----><div class="group" data-v-19481d41><div class="item appearance" data-v-19481d41><p class="label" data-v-19481d41>Appearance</p><div class="appearance-action" data-v-19481d41><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-19481d41 data-v-d3936e48 data-v-73ab608a><span class="check" data-v-73ab608a><span class="icon" data-v-73ab608a><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d3936e48><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d3936e48><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-19481d41><div class="item social-links" data-v-19481d41><div class="VPSocialLinks social-links-list" data-v-19481d41 data-v-5bfb9d64><!--[--><a class="VPSocialLink" href="https://github.com/better-ui/better-ui" title="github" target="_blank" rel="noopener noreferrer" data-v-5bfb9d64 data-v-5277b777><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-5277b777><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-5277b777>github</span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-951e4890 data-v-75c65918><span class="container" data-v-75c65918><span class="top" data-v-75c65918></span><span class="middle" data-v-75c65918></span><span class="bottom" data-v-75c65918></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-ba23db2c data-v-145af8c8><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-145af8c8><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-145af8c8><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-145af8c8>Menu</span></button><a class="top-link" href="#" data-v-145af8c8> Return to top </a></div><aside class="VPSidebar" data-v-ba23db2c data-v-6a4e5548><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-6a4e5548><span class="visually-hidden" id="sidebar-aria-label" data-v-6a4e5548> Sidebar Navigation </span><!--[--><div class="group" data-v-6a4e5548><section class="VPSidebarGroup collapsible" data-v-6a4e5548 data-v-b5478624><div class="title" role="button" data-v-b5478624><h2 class="title-text" data-v-b5478624>快速开始</h2><div class="action" data-v-b5478624><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-b5478624><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-b5478624><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-b5478624><!--[--><a class="VPLink link active" href="/components/button/" data-v-b5478624 data-v-54a60992 data-v-fe9a2d10><!--[--><span class="link-text" data-v-54a60992>Button 按钮</span><!--]--><!----></a><a class="VPLink link" href="/components/icon/" data-v-b5478624 data-v-54a60992 data-v-fe9a2d10><!--[--><span class="link-text" data-v-54a60992>Icon 图标</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-6a4e5548><section class="VPSidebarGroup collapsible" data-v-6a4e5548 data-v-b5478624><div class="title" role="button" data-v-b5478624><h2 class="title-text" data-v-b5478624>Config</h2><div class="action" data-v-b5478624><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-b5478624><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-b5478624><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-b5478624><!--[--><a class="VPLink link" href="/components/1/" data-v-b5478624 data-v-54a60992 data-v-fe9a2d10><!--[--><span class="link-text" data-v-54a60992>Index</span><!--]--><!----></a><a class="VPLink link" href="/components/2/" data-v-b5478624 data-v-54a60992 data-v-fe9a2d10><!--[--><span class="link-text" data-v-54a60992>Three</span><!--]--><!----></a><a class="VPLink link" href="/components/3/" data-v-b5478624 data-v-54a60992 data-v-fe9a2d10><!--[--><span class="link-text" data-v-54a60992>Four</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-ba23db2c data-v-8735cb04><div class="VPDoc has-sidebar" data-v-8735cb04 data-v-623042bf><div class="container" data-v-623042bf><div class="aside" data-v-623042bf><div class="aside-curtain" data-v-623042bf></div><div class="aside-container" data-v-623042bf><div class="aside-content" data-v-623042bf><div class="VPDocAside" data-v-623042bf data-v-b1f66fa8><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-b1f66fa8 data-v-101ba82d><div class="content" data-v-101ba82d><div class="outline-marker" data-v-101ba82d></div><div class="outline-title" data-v-101ba82d>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-101ba82d><span class="visually-hidden" id="doc-outline-aria-label" data-v-101ba82d> Table of Contents for current page </span><ul class="root" data-v-101ba82d><!--[--><li style="" data-v-101ba82d><a class="outline-link" href="#基础用法" data-v-101ba82d>基础用法</a><!----></li><li style="" data-v-101ba82d><a class="outline-link" href="#图标按钮" data-v-101ba82d>图标按钮</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-b1f66fa8></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-623042bf><div class="content-container" data-v-623042bf><!--[--><!--]--><main class="main" data-v-623042bf><div style="position:relative;" class="vp-doc _components_button_index" data-v-623042bf><div><h1 id="button-按钮" tabindex="-1">Button 按钮 <a class="header-anchor" href="#button-按钮" aria-hidden="true">#</a></h1><p>常用操作按钮</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-hidden="true">#</a></h2><p>基础的函数用法</p><div class="demo-block demo-index" data-v-5f05cae2><div class="source" data-v-5f05cae2><!--[--><div><div style="margin-bottom:20px;"><button class="py-1.5
          px-3
          rounded-lg
          bg-blue-500
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-white-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->主要按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-lg
          bg-green-500
          hover:bg-green-400
          border-green-500
          cursor-pointer
          border-solid
          text-white-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->绿色按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-lg
          bg-gray-500
          hover:bg-gray-400
          border-gray-500
          cursor-pointer
          border-solid
          text-white-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->灰色按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-lg
          bg-yellow-500
          hover:bg-yellow-400
          border-yellow-500
          cursor-pointer
          border-solid
          text-white-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->黄色按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-lg
          bg-red-500
          hover:bg-red-400
          border-red-500
          cursor-pointer
          border-solid
          text-white-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->红色按钮<!--]--></button></div><div style="margin-bottom:20px;"><button class="py-1.5
          px-3
          rounded-lg
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->朴素按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-lg
          bg-green-100
          hover:bg-green-400
          border-green-500
          cursor-pointer
          border-solid
          text-green-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->绿色按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-lg
          bg-gray-100
          hover:bg-gray-400
          border-gray-500
          cursor-pointer
          border-solid
          text-gray-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->灰色按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-lg
          bg-yellow-100
          hover:bg-yellow-400
          border-yellow-500
          cursor-pointer
          border-solid
          text-yellow-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->黄色按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-lg
          bg-red-100
          hover:bg-red-400
          border-red-500
          cursor-pointer
          border-solid
          text-red-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->红色按钮<!--]--></button></div><div style="margin-bottom:20px;"><button class="py-1
          px-2
          rounded-lg
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-sm
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->小按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-lg
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->中按钮<!--]--></button><button class="py-2
          px-4
          rounded-lg
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-lg
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><!--[-->大按钮<!--]--></button></div><div style="margin-bottom:20px;"><button class="py-1.5
          px-3
          rounded-full
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-search p-3"></i><!--[-->搜索按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-full
          bg-green-100
          hover:bg-green-400
          border-green-500
          cursor-pointer
          border-solid
          text-green-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-edit p-3"></i><!--[-->编辑按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-full
          bg-gray-100
          hover:bg-gray-400
          border-gray-500
          cursor-pointer
          border-solid
          text-gray-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-check p-3"></i><!--[-->成功按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-full
          bg-yellow-100
          hover:bg-yellow-400
          border-yellow-500
          cursor-pointer
          border-solid
          text-yellow-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-message p-3"></i><!--[-->提示按钮<!--]--></button><button class="py-1.5
          px-3
          rounded-full
          bg-red-100
          hover:bg-red-400
          border-red-500
          cursor-pointer
          border-solid
          text-red-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-delete p-3"></i><!--[-->删除按钮<!--]--></button></div><div style="margin-bottom:20px;"><button class="py-1.5
          px-3
          rounded-full
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-search p-3"></i></button><button class="py-1.5
          px-3
          rounded-full
          bg-green-100
          hover:bg-green-400
          border-green-500
          cursor-pointer
          border-solid
          text-green-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-edit p-3"></i></button><button class="py-1.5
          px-3
          rounded-full
          bg-gray-100
          hover:bg-gray-400
          border-gray-500
          cursor-pointer
          border-solid
          text-gray-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-check p-3"></i></button><button class="py-1.5
          px-3
          rounded-full
          bg-yellow-100
          hover:bg-yellow-400
          border-yellow-500
          cursor-pointer
          border-solid
          text-yellow-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-message p-3"></i></button><button class="py-1.5
          px-3
          rounded-full
          bg-red-100
          hover:bg-red-400
          border-red-500
          cursor-pointer
          border-solid
          text-red-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-delete p-3"></i></button></div></div><!--]--></div><div class="meta" data-v-5f05cae2><div class="description" data-v-5f05cae2><!--[--><div>使用<code>size</code>、<code>color</code>、<code>pain</code>、<code>round</code>属性来定义 Button 的样式。</div><!--]--></div><div class="highlight" data-v-5f05cae2><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>主要按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>green<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>绿色按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gray<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>灰色按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yellow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>黄色按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>red<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>红色按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span>
 <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>朴素按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>green<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>绿色按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gray<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>灰色按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yellow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>黄色按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>red<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>红色按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>small<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>小按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>medium<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>中按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>large<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>大按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>搜索按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>green<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>edit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>编辑按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gray<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>check<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>成功按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yellow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提示按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>red<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>delete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>删除按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>blue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>green<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>edit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gray<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>check<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yellow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>red<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>delete<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><div class="demo-block-control" data-v-5f05cae2><i class="control-icon icon-caret-down" data-v-5f05cae2></i><span style="display:none;" class="control-text" data-v-5f05cae2>显示代码</span><div class="control-button-wrap" data-v-5f05cae2><span style="display:none;" class="control-button copy-button" data-v-5f05cae2>复制代码片段</span></div></div></div><h2 id="图标按钮" tabindex="-1">图标按钮 <a class="header-anchor" href="#图标按钮" aria-hidden="true">#</a></h2><p>带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。</p><div class="demo-block demo-index" data-v-5f05cae2><div class="source" data-v-5f05cae2><!--[--><div><div class="flex flex-row"><button class="py-1.5
          px-3
          rounded-lg
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-edit p-3"></i></button><button class="py-1.5
          px-3
          rounded-lg
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-delete p-3"></i></button><button class="py-1.5
          px-3
          rounded-lg
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-share p-3"></i></button><button class="py-1.5
          px-3
          rounded-full
          bg-blue-100
          hover:bg-blue-400
          border-blue-500
          cursor-pointer
          border-solid
          text-blue-500
          text-base
          hover:text-white
          transition duration-300 ease-in-out transform hover:scale-105
          mx-1"><i class="i-ic-baseline-search p-3"></i><!--[-->搜索<!--]--></button></div></div><!--]--></div><div class="meta" data-v-5f05cae2><div class="description" data-v-5f05cae2><!--[--><div>设置 icon 属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用 i 标签即可，可以使用自定义图标。</div><!--]--></div><div class="highlight" data-v-5f05cae2><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex flex-row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>edit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>delete<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>share<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BButton</span> <span class="token attr-name">round</span> <span class="token attr-name">plain</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BButton</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><div class="demo-block-control" data-v-5f05cae2><i class="control-icon icon-caret-down" data-v-5f05cae2></i><span style="display:none;" class="control-text" data-v-5f05cae2>显示代码</span><div class="control-button-wrap" data-v-5f05cae2><span style="display:none;" class="control-button copy-button" data-v-5f05cae2>复制代码片段</span></div></div></div></div></div></main><footer class="VPDocFooter" data-v-623042bf data-v-25b51842><div class="edit-info" data-v-25b51842><div class="edit-link" data-v-25b51842><a class="VPLink link edit-link-button" href="https://github.com/better-ui/better-ui/edit/master/packages/better-ui/docs/components/button/index.md" target="_blank" rel="noopener noreferrer" data-v-25b51842 data-v-fe9a2d10><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-25b51842><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page on GitHub<!--]--><!----></a></div><div class="last-updated" data-v-25b51842><p class="VPLastUpdated" data-v-25b51842 data-v-28a69082>Last updated: <time datatime="2022-08-15T05:02:08.000Z" data-v-28a69082></time></p></div></div><div class="prev-next" data-v-25b51842><div class="pager" data-v-25b51842><!----></div><div class="pager" data-v-25b51842><a class="pager-link next" href="/components/icon/" data-v-25b51842><span class="desc" data-v-25b51842>Next page</span><span class="title" data-v-25b51842>Icon 图标</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-ba23db2c data-v-690ae163><div class="container" data-v-690ae163><p class="message" data-v-690ae163>Released under the MIT License.</p><p class="copyright" data-v-690ae163>Copyright © 2022-present H7ml</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_button_index.md\":\"6e839d9a\",\"components_icon_index.md\":\"83753439\",\"components_index.md\":\"f3bf2838\",\"guide_index.md\":\"57b442f7\",\"index.md\":\"d52412c3\",\"resource_index.md\":\"8f35b784\",\"theme_index.md\":\"1acd4aaf\"}")</script>
    <script type="module" async src="/assets/app.9ae676fd.js"></script>
    
  </body>
</html>